<template>
  <div class="contents">
    <div class="oneCircle">
      <div class="twoCircle" id="twoCircle">
        <canvas id="canvasData" :width="chartWidth" :height="chartHeight"></canvas>
      </div>
    </div>
    <div class="smallBgBox">
      <div class="smallBg">
        <div class="titleBoxToken">昨日{{ $tokenName }}汇率</div>
        <div class="titleBoxToken2">1{{ $tokenName }}={{ pastToken }}元</div>
      </div>
      <div class="smallBg">
        <div class="titleBoxToken">今日{{ $tokenName }}汇率</div>
        <div class="titleBoxToken2">1{{ $tokenName }}={{ nowToken }}元</div>
      </div>
    </div>
    <div class="centerTitle">
      总发行{{ $tokenName }}
      <div class="box-item">
        <li v-for="(item, index) in orderNum" :key="index"
          :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }">
          <span v-if="!isNaN(item)">
            <i ref="numberItem">0123456789</i>
          </span>
          <span v-else class="comma">{{ item }}</span>
        </li>
      </div>
    </div>
    <div class="dingdanBgBOx">
      <div class="dingdanBg">
        昨日订单<br /><span>{{ pastorder }}</span>
      </div>
      <div class="dingdanBg">
        今日订单<br /><span>{{ noworder }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getTokenInfoAndOrderInfo } from "@/api/user";
import { RotatingCircle } from "@/utils/fatterRotating.mini.js";
var circle;

//统一的动画入口
function refer() {
  window.requestAnimationFrame(function () {
    circle.createCircle();
    refer();
  });
}
export default {
  props: {
    optionDatas: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    number: {
      handler(val) {
        this.toOrderNum(val);
      },
      deep: true,
    },
    optionDatas: {
      handler(val) {
        console.log(val);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      pastToken: "",
      nowToken: "",
      noworder: "",
      pastorder: "",
      number: 0,
      length: 7,
      chartHeight: 500, // 常见尺寸屏幕的高度设为默认值，下同
      chartWidth: 500,
      orderNum: ["0", "0", "0", "0", "0", "0", "0"], // 默认总数
    };
  },
  created() { },
  mounted() {
    this.getTokenInfoAndOrderInfo();
    this.getChartWH();
    this.$nextTick(() => {
      this.init();
    });
    setTimeout(() => {
      this.toOrderNum(this.number); // 这里输入数字即可调用
    }, 500);
  },
  methods: {
    // 更新文字
    updateText(noworder, number) {
      console.log("更新了");
      this.noworder = noworder;
      this.number = number;
    },
    async getTokenInfoAndOrderInfo() {
      const res = await getTokenInfoAndOrderInfo();
      if (res.code === 200) {
        console.log(res.data, "通证订单数据");
        this.pastToken = res.data.pastToken;
        this.nowToken = res.data.todayToken;
        this.pastorder = res.data.pastOrder;
        this.noworder = res.data.todayOrder;
        this.number = res.data.tokenSum;
      }
    },
    // // 设置文字滚动
    setNumberTransform() {
      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
      // eslint-disable-next-line no-restricted-globals
      const numberArr = this.orderNum.filter((item) => !isNaN(item));
      // console.log(numberItems.length, numberArr)
      // 结合CSS 对数字字符进行滚动,显示数量
      for (let index = 0; index < numberItems.length; index += 1) {
        const elem = numberItems[index];
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
      }
    },
    // 处理总数字
    toOrderNum(num) {
      const numtext = num.toString();
      if (this.length) {
        if (numtext.length < this.length) {
          const numlist = `0${numtext}`; // 如未满固定数，添加"0"补位
          this.toOrderNum(numlist); // 递归添加"0"补位
        } else if (numtext.length === num.length) {
          this.orderNum = numtext.split(""); // 将其便变成数据，渲染至滚动数组
        }
      } else {
        this.orderNum = numtext.split("");
      }
      this.$nextTick(() => {
        this.setNumberTransform();
      });
      // this.setNumberTransform()
    },
    getChartWH() {
      let chartDiv = document.getElementById("twoCircle");
      let canvas = document.getElementById("canvasData");
      this.chartWidth = chartDiv.offsetWidth - 50;
      this.chartHeight = chartDiv.offsetHeight - 50;
    },
    init() {
      var canvas = document.getElementById("canvasData");
      var txtOpts = {
        content: "",
        txtColor: "RGB(21,253,255)",
        align: "center",
        font: "40px Arial", //CSS font 属性相同的语法
        textBaseline: "middle", //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
      };
      var opts = [
        {
          radius: this.chartHeight / 2.6, //半径，内圆动态线，
          lineWidth: 10, //宽度，调整动态线宽度
          strokeStyle: "RGBA(110, 78, 231, 1)", //颜色，支持rgb rgba 网页等
          degreeStart: -180, //开始角度
          degreeEnd: 200, //结束角度
          stepStart: 4, //开始递增数量
          stepEnd: 3, //结束递增数量
          angleSpeed: 0.1, //转动速度
        },
        {
          radius: this.chartHeight / 2.8, //内圆线半径，静态的
          lineWidth: 5,
          strokeStyle: "RGBA(39, 83, 223, 1)",
          degreeStart: -90,
          degreeEnd: 360,
        },
        {
          radius: this.chartHeight / 2.75, //静态最外成圈，非刻度盘
          lineWidth: 1,
          strokeStyle: "RGBA(213, 72, 243, 1)",
          degreeStart: -90,
          degreeEnd: 360,
        },
        {
          radius: this.chartHeight / 2.45, //内刻度盘
          lineWidth: 8, //刻度盘宽度
          fillStyle: "RGBA(46, 87, 226, 1)", //内刻度盘，静态色
          emFillStyle: "RGBA(180, 74, 240, 1)", //内刻度盘，变化色
          lengthParam: 30, //刻度线长度
          step: 10, //变化占用多少个格 0-60
        },
        {
          radius: this.chartHeight / 3.1, //外刻度盘
          lineWidth: 5, //刻度盘宽度
          fillStyle: "RGBA(47, 83, 224, 1)", //外刻度盘，静态色
          emFillStyle: "47, 83, 224", //外刻度盘，变化色
          step: 10, //变化占用多少个格 0-19
          speed: 0.2, //转动速度
        },
        {
          radius: this.chartHeight / 2.45, //内刻度盘
          lineWidth: 8, //刻度盘宽度
          fillStyle: "RGBA(46, 87, 226, 1)", //内刻度盘，静态色
          emFillStyle: "RGBA(180, 74, 240, 1)", //内刻度盘，变化色
          lengthParam: 30, //刻度线长度
          step: 10, //变化占用多少个格 0-60
        },
        {
          radius: this.chartHeight / 2.1, //外刻度盘
          lineWidth: 10, //刻度盘宽度
          fillStyle: "RGBA(129, 77, 234, 0.1)", //外刻度盘，静态色
          emFillStyle: "129, 77, 234", //外刻度盘，变化色
          step: 10, //变化占用多少个格 0-19
          speed: 0.2, //转动速度
        },
      ];
      circle = RotatingCircle(canvas, opts, txtOpts);
      circle.init();
      circle.chageTxt("80%");

      //动起来
      refer();
    },
  },
};
</script>
<style scoped lang="scss">
.contents {
  position: relative;

  .oneCircle {
    position: absolute;
    width: 3.6458rem;
    height: 3.6458rem;
    background: rgba(11, 54, 112, 0.251);
    border-radius: 50%;
    z-index: 1;
    padding-top: 0.3385rem;

    .twoCircle {
      margin: 0 auto;
      text-align: center;
      padding: 0.1302rem;
      width: 2.9688rem;
      height: 2.9688rem;
      background: RGBA(6, 25, 86, 0.5);
      border-radius: 50%;

      /* text-align: center; */
      canvas {
        display: block;
        margin: 0 auto;
        text-align: center;
      }
    }
  }

  .smallBgBox {
    display: flex;
    justify-content: space-between;
    margin: 0 0.0938rem 0.5208rem;

    .smallBg {
      width: 1.25rem;
      height: 0.5833rem;
      z-index: 99;
      background: url(../assets/imgs/smallBg.png) no-repeat center;
      background-size: contain;

      .titleBoxToken {
        margin-bottom: 0.1302rem;
        text-align: center;
        padding-top: 0.0781rem;
        font-size: 0.1042rem;
        color: rgba(255, 255, 255, 0.8);
        line-height: 0.1094rem;
      }

      .titleBoxToken2 {
        font-weight: 500;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-size: 0.125rem;
        color: #ffffff;
        line-height: 0.1094rem;
        /* text-shadow: 0 0 10px #0487fb; */
        text-shadow: 2px 2px 2px #0487fb, -2px 2px 2px #0487fb,
          2px -2px 2px #0487fb, -2px -2px 2px #0487fb;
        text-align: center;
      }
    }
  }

  .centerTitle {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 40%;
    height: 43%;
    padding-top: 0.4167rem;
    border-radius: 50%;
    background: radial-gradient(#271ec3 0%, #13116f 100%);
    z-index: 999;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 0.1667rem;
    color: #ffffff;
    text-shadow: 3px 3px 3px #0487fb, -3px 3px 3px #0487fb, 3px -3px 3px #0487fb,
      -3px -3px 3px #0487fb;
    text-align: center;

    span {
      display: inline-block;
      padding-top: 0.0521rem;
      font-size: 0.25rem;
    }
  }

  .dingdanBgBOx {
    display: flex;
    padding-top: 1.6563rem;
    width: 100%;
    justify-content: space-between;

    .dingdanBg {
      padding: 0.1771rem 0 0 0.599rem;
      z-index: 99999;
      width: 1.1979rem;
      height: 0.625rem;
      background: url(../assets/imgs/dingdanBg.png) no-repeat center;
      background-size: contain;
      font-size: 0.0729rem;
      color: rgba(255, 255, 255, 0.8);
      line-height: 0.1094rem;

      span {
        margin-left: 0.0521rem;
        font-weight: 500;
        font-size: 0.1042rem;
        color: #ffffff;
      }
    }
  }
}

/*总量滚动数字设置*/
.box-item {
  margin: 0 auto;
  position: relative;
  /* // height: 34px; */
  /* left: 0.625rem; */
  /* margin-bottom: 0.5208rem; */
  text-align: center;
  list-style: none;
  writing-mode: vertical-lr;
  text-orientation: upright;
}

/*滚动数字设置*/
.number-item {
  width: 0.1823rem;
  height: 0.2813rem;
  list-style: none;

  &>span {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 0.25rem;
    font-family: DS-Digital, DS-Digital;
    font-weight: 500;
    color: #ffffff;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    &>i {
      font-style: normal;
      position: absolute;
      top: 0.0104rem;
      left: 50%;
      transform: translate(-50%, 0);
      transition: transform 1s ease-in-out;
      letter-spacing: 0.0521rem;
    }
  }
}

.number-item:last-child {
  margin-right: 0;
}
</style>
